<template>
  <div class>
    <naviHeader></naviHeader>
    <div>
      <div class="select-container">
        <input type="text" v-model="phone" placeholder="请输入关键字">
        <div class="selectBtn" v-on:click="selectBtn">搜索</div>
      </div>

      <div class="content-container">
        <div class="header">
          <!-- <div
            class="tab-item"
            v-bind:class="{'select-item': selectIndex === index}"
            v-on:click="selectIndex = index"
            v-for="(item, index) in tabList"
            :key="item.index"
          >{{item.name}}</div>-->
        </div>

        <div class="content" v-show="list.length === 0">暂无相关课程</div>

        <!-- <pullTo :top-load-method="init" :bottom-load-method="getMoreData"> -->
        <div class="container" ref="container">
          <div v-for="item in list" :key="item.index">
            <router-link :to="{name: 'course', params: {id: item.id}}">
              <div class="item">
                <div>
                  <img class="poster" v-bind:src="imgBaseUrl + item.coverUrl" alt>
                </div>

                <div>
                  <div>
                    <div class="title">{{item.name}}</div>
                  </div>
                  <div class="info">
                    <div>
                      <div class="price">{{item.price}}</div>
                      <div class="person">
                        <div>
                          <img src="../../images/icon/person.png" alt>
                        </div>
                        <div class="text-999">{{item.alias}}</div>
                      </div>
                    </div>

                    <div>
                      <div class="text-999">{{item.buyNumber}}人购买</div>
                      <div class="pageView">
                        <div>
                          <img src="../../images/icon/eye.png" alt>
                        </div>
                        <div class="text-999">{{item.viewNumber}}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </router-link>
          </div>
        </div>

        <!-- </pullTo> -->
      </div>
    </div>
  </div>
</template>

<script>
import naviHeader from "src/components/naviHeader/naviHeader";
import pullTo from "src/components/pullTo/pullTo";
import { getCourseList } from "../../service/getData";
import { imgBaseUrl } from "../../config/env";
// import PullTo from "vue-pull-to";

export default {
  data() {
    return {
      imgBaseUrl: imgBaseUrl,
      list: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
      indirectClassmates: [],
      selectIndex: 0,
      classmates: [],
      selectList: [],
      phone: "",
      tabList: [
        {
          name: "全部"
        },
        {
          name: "视频"
        },
        {
          name: "音频"
        },
        {
          name: "文章"
        }
      ],
      pageNumber: 1,
      hasMore: true
    };
  },

  watch: {
    selectIndex: function() {
      switch (this.selectIndex) {
        case 0:
          // this.list = this.indirectClassmates;
          break;
        case 1:
          // this.list = this.classmates;
          break;
        case 2:
          // this.list = this.expendRecord;
          break;
        case 3:
          // this.list = this.expendRecord;
          break;
      }
    }
  },
  mounted() {
    // this.init();
    // 通过$refs获取dom元素
    this.box = this.$refs.container;
        console.log(" scroll " + this.$refs.container.scrollTop);
    // 监听这个dom的scroll事件
    this.box.addEventListener("scroll",() => {
        console.log(" scroll " + this.$refs.container.scrollTop);
        //以下是我自己的需求，向下滚动的时候显示“我是有底线的（类似支付宝）”
        this.isScroll = this.$refs.container.scrollTop > 0;
      },
      false
    );
  },
  components: {
    naviHeader,
    pullTo
  },
  methods: {
    init: function() {
      console.log("init");
      getCourseList(this.$store.userToken, 1).then(res => {
        this.classmates = res.content;
        this.list = res.content;
      });
    },
    selectBtn: function() {
      getCourseList(this.$store.userToken, 1, this.name).then(res => {
        this.classmates = res.content;
        this.list = res.content;
      });
    },
    getMoreData: function() {
      console.log("getMore");
      if (!this.hasMore) return;
      var pageNumber = this.pageNumber + 1;
      getCourseList(this.$store.userToken, pageNumber, this.name).then(res => {
        var data = [];
        if (this.classmates.length === 0) {
          data = res.content;
        } else {
          data = this.classmates.concat(res.content);
        }

        if (res.content.length < 20) {
          this.hasMore = false;
        }
        this.classmates = data;
        this.list = data;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../style/mixin";

.select-container {
  @include fj(space-around);
  align-items: center;
  height: 2rem;
  line-height: 2rem;
  background: #fff;
  border-bottom: 2px solid #f1f1f1;

  input {
    width: 6.5rem;
    height: 1rem;
    line-height: 1rem;
    border: 2px solid #f1f1f1;
    padding: 0.2rem;
    margin-left: 0.3rem;
    border-radius: 10px;
  }

  .selectBtn {
    width: 2rem;
    text-align: center;
  }
}

.content-container {
  .header {
    @include fj(space-around);
    background: #fff;
    // border-bottom: 2px solid #f1f1f1;

    .tab-item {
      width: 2rem;
      height: 1rem;
      line-height: 1rem;
      text-align: center;
    }

    .select-item {
      border-bottom: 2px solid #16e08f;
    }
  }

  .content {
    @include sc(0.4rem, #000);
    @include fj(center);
    align-items: center;
    background: #f1f1f1;
    height: 4rem;
    width: 100%;
  }

  .item {
    @include fj(flex-start);
    border-bottom: 2px solid #f1f1f1;
    background: #fff;

    .poster {
      width: 3.5rem;
      height: 2.6rem;
      margin: 0.2rem 0.1rem;
    }

    .title {
      font-size: 0.35rem;
      margin: 0.2rem 0.1rem;
      height: 1.2rem;
    }

    .price {
      color: #049009;
      // margin: 0.2rem 0.1rem;
      font-size: 0.35rem;
    }

    .price::before {
      content: "￥";
      font-size: 0.28rem;
    }

    .info {
      @include fj(space-between);
      align-items: center;
      width: 3.5rem;

      .person {
        @include fj(space-around);
        margin-top: 0.1rem;

        img {
          height: 0.4rem;
          width: 0.4rem;
          margin-right: 0.1rem;
        }
      }

      .pageView {
        @include fj(space-around);
        margin-top: 0.1rem;

        img {
          height: 0.4rem;
          width: 0.4rem;
          margin-right: 0.1rem;
        }
      }

      .text-999 {
        @include sc(0.28rem, #999);
      }
    }
  }
}
</style>
